<template>
	<van-action-sheet :show="show" :title="actionSheetTitle" @close="close">
		<div class="flexCenter" style="height: 100rpx; overflow: hidden; padding: 0 20rpx 0 10rpx" v-if="showSearch">
			<div style="justify-content: center; margin-right: -20rpx" class="flexCenter" @click="showFilterPop = true"
				v-if="showFilter">
				<div style="margin-right: 6rpx; font-size: 26rpx">
					{{ filterList[currentFilterIndex]?.name }}
				</div>
				<van-icon name="arrow-down" />
			</div>
			<van-action-sheet :show="showFilterPop" :actions="filterList" @close="showFilterPop = false"
				@select="selectFilter" />
			<div style="flex: 1; justify-content: space-between" class="flexCenter">
				<van-search :placeholder="placeholder" :value="searchText" use-action-slot @change="changeSearchText"
					style="flex: 1" @search="getList">
				</van-search>
				<van-button color="#3975F6" type="info" slot="action" style="margin-left: 6rpx" size="small"
					@click="getList">搜索</van-button>
			</div>
		</div>
		<scroll-view scroll-y style="height: 50vh" type="list" class="mall">
			<radio-group @change="radioChange">
				<template v-if="list && list.length > 0">
					<template v-for="(item, index) in list" :key="index">
						<!-- <view style="padding: 0 30rpx" v-if="item" @click.stop="currentSelectIndex = index">
							<div class="flex" style="padding: 30rpx 0; align-items: center"
								:style="{ borderTop: index == 0 ? 0 : '1px solid #eee' }">
								<radio color="#3975F6" :checked="currentSelectIndex == index"
									style="transform: scale(0.8)" />
								<div style="flex: 1; margin-left: 30rpx" v-if="type == '仓库'">
									<div v-if="item.FName" class="item" style="margin-bottom: 8rpx">
										<span class="key">仓库名称：</span>
										<span class="value">{{ item.FName }}</span>

									</div>
									<div v-if="item.FNumber" class="item" style="margin-bottom: 8rpx">
										<span class="key">仓库编号：</span>
										<span class="value">{{ item.FNumber }}</span>
									</div>
									<div class="item">
										<span class="key">仓位编号：</span>
										<span class="value">{{ JSON.parse(item.Value)[2] || '' }}</span>
									</div>

								</div>
								<div style="flex: 1; margin-left: 30rpx" v-else>
									<div v-if="item.FName" class="item" style="margin-bottom: 8rpx">
										<span class="key">名称：</span>
										<span class="value">{{ item.FName }}</span>
									</div>
									<div v-if="item.FNumber" class="item">
										<span class="key">编号：</span>
										<span class="value">{{ item.FNumber }}</span>
									</div>

								</div>
							</div>
						</view> -->
						<view style="padding: 0 30rpx" v-if="item" @click.stop="currentSelectIndex = index">
							<div class="flex" style="padding: 30rpx 0; align-items: center"
								:style="{ borderTop: index == 0 ? 0 : '1px solid #eee' }">
								<radio color="#3975F6" :checked="currentSelectIndex == index"
									style="transform: scale(0.8)" />
								<div style="flex: 1; margin-left: 30rpx">
									<div class="flex" v-for="(filterItem, filterIndex) in filterList"
										:key="filterIndex">
										<div class="key">{{ filterItem.name }}：</div>
										<div class="value">{{ item[filterItem.key] }}</div>
									</div>

								</div>
							</div>
						</view>
					</template>
				</template>
			</radio-group>
		</scroll-view>
		<div class="flex specification_btn" style="justify-content: space-between; padding: 28rpx">
			<template>
				<div style="margin-right: 20rpx; background-color: #fff; color: #3975f6" @click.stop="close">
					取消
				</div>
				<div @click.stop="submit">确定</div>
			</template>
		</div>
	</van-action-sheet>
</template>

<script setup lang="ts">
	import { getOrderList } from '@/api/user';
	import { Utils } from '@/utils/utils';
	import { onShow } from '@dcloudio/uni-app';
	import { ref, watch } from 'vue';
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		// 数据类型
		type: {
			type: String,
			default: '',
		},
		FormId: {
			type: String,
			default: '',
		},
		// 父页面标题
		pageTitle: {
			type: String,
			default: '',
		},
		// 显示过滤条件
		showFilter: {
			type: Boolean,
			default: true,
		},
		// 显示搜索框
		showSearch: {
			type: Boolean,
			default: true,
		},
		// 展示列表
		defaultList: {
			type: Array as any,
			default: [],
		},
		// 获取字段
		FieldKeys: {
			type: String,
			default: '',
		},
		// 搜索内容text
		defaultSearchText: {
			type: String,
			default: '',
		},
		// 过滤列表
		filterList: {
			type: Array as any,
			default: [],
		},
		// 过滤条件
		FilterString: {
			type: Array as any,
			default: [],
		},
		// 是否添加过滤组织
		isAddFUseOrgId: {
			type: Boolean,
			default: true,
		},
	});
	// 监听show属性变化，获取数据
	watch(
		() => props.show,
		(newValue, oldValue) => {
			if (props.show) {
				currentSelectIndex.value = 0;
				currentFilterIndex.value = 0;

				list.value = [];
				searchText.value = '';
				actionSheetTitle.value = '请选择' + props.type;
				placeholder.value =
					'请输入关键字搜索';
				props.FieldKeys
				// 是否传过滤列表
				if (props.filterList.length > 0) {
					filterList.value = props.filterList
				} else {
					filterList.value = [
						{ name: '名称', value: 0, key: "FName" },
						{ name: '编号', value: 1, key: 'FNumber' },

					];
				}

				getList();
			}
		}
	);

	// 组件回调
	const emit = defineEmits(['radioChange', 'close', 'submit']);
	// 当前选中项的索引
	const currentSelectIndex = ref(0);
	// 弹出标题
	const actionSheetTitle = ref('请选择');
	// 输入提示
	const placeholder = ref('请输入关键字搜索');
	/**
	 * 过滤条件列表
	 */
	const filterList = ref([
		{ name: '名称', value: 0, key: "FName" },
		{ name: '编号', value: 1, key: 'FNumber' },

	]);
	// 过滤条件索引
	// 0: 编号 1: 名称
	const currentFilterIndex = ref(0);
	const showFilterPop = ref(false);
	const selectFilter = (e : any) => {
		currentFilterIndex.value = e.detail.value;
		console.log();
	};
	const radioChange = (e : any) => {
		currentSelectIndex.value = Number(e.detail.value);
	};
	const searchText = ref('');
	// 监听输入框内容
	const changeSearchText = (e : any) => {
		searchText.value = e.detail;
	};
	// 关闭弹窗
	const close = () => {
		emit('close');
	};
	// 确定
	const submit = () => {
		emit('submit', list.value[currentSelectIndex.value]);
		close()
	};
	const list = ref([] as any);
	/**
	 * 获取数据
	 */
	const getList = async () => {
		currentSelectIndex.value = 0;
		list.value = [];
		// 如果默认列表存在，则直接赋值
		if (props.defaultList && props.defaultList.length > 0) {
			list.value = props.defaultList;
			return;
		}
		// 调用组件传过来的过滤条件
		let FilterString = [...props.FilterString]

		if (props.isAddFUseOrgId) {
			FilterString = [...FilterString, Utils.getFilterString('FUseOrgId.FNumber', Utils.getStorage('currentOrganization')?.FNumber, '=', '', ''), ...FilterString]
		}
		FilterString = [
			Utils.getFilterString(filterList.value[currentFilterIndex.value]['key']!, searchText.value, 'Like', '', ''),
			...FilterString]
		if (props.type != '即时库存') {
			FilterString = [
				Utils.getFilterString(filterList.value[currentFilterIndex.value]['key']!, searchText.value, 'Like', '', ''),
				Utils.getFilterString('FDocumentStatus', 'C', '105', '', ''),
				Utils.getFilterString('FForbidStatus', 'A', '105', '', ''), ...FilterString]
		}

		// 获取了列表数据
		const res : any = await getOrderList({
			data: JSON.stringify({
				FormId: props.FormId || Utils.getFormId(props.type),
				FieldKeys: props.FieldKeys || 'FNumber,FName,FDocumentStatus,FForbidStatus,FUseOrgId.FNumber',
				FilterString,
				OrderString: '',
			}),
		})
		list.value = res.map((v : any) => {
			const obj = {
				FNumber: v[0],
				FName: v[1],
				Value: JSON.stringify(v)
			}
			if (props.type == '即时库存'){
				obj['FLot.FNumber'] = v[0]
			}

			if (props.type == '仓库') {
				obj['FFlexEntryId.FNumber'] = v[2]
			}
			return obj
		});


		if (list.value && list.value.length > 300) {
			list.value.length = 300;
		}
	};
</script>

<style lang="less" scoped>
	.specification_btn {
		view {
			flex: 1;
			padding: 20rpx 0;
			border-radius: 10rpx;
			border: 1px solid #3975f6;
			background: #3975f6;
			font-weight: 500;
			font-size: 28rpx;
			text-align: center;
			color: #fff;
		}
	}

	.item {
		display: flex;
		margin-bottom: 8rpx;

		.key {
			color: #666;
		}

		.value {
			flex: 1;
			font-weight: 500;
		}
	}
</style>